<template>
    <div>
        <c-title text="招商员详情"> </c-title>
        <div class="account-manager">
            <img :src="merchants_details_data&&merchants_details_data.has_one_member&&merchants_details_data.has_one_member.avatar_image" alt="">
            <div class="account-manager-right">
                <div style="flex:1;      margin-right: .9063rem;">
                    <div class="flex-j-sb flex-a-c lh-1" style="margin-bottom: .625rem;">
                        <div class="flex-a-c">
                            <div class="name">{{merchants_details_data&&merchants_details_data.has_one_member&&merchants_details_data.has_one_member.nickname}}</div>
                        </div>
                        <div class="count">
                            {{ merchants_details_data&&merchants_details_data.store_count }}
                        </div>
                    </div>
                    <div class="flex-j-sb flex-a-c lh-1">
                        <div class="c-999 f-12">{{ merchants_details_data&&merchants_details_data.created_at }}</div>
                        <div class="c-999 f-12">招募商家数</div>
                    </div>
                </div>
            </div>
        </div>
        <van-tabs v-model="active1" line-width=".9375rem" line-height=".125rem">
            <van-tab title="商家列表"></van-tab>
        </van-tabs>
        <div class="list">
            <div class="merchant-item" v-for="item in list" :key="item.id" @click="link(item)" :class="{'active-class':item.active==0}">
                <div class="flex-a-c">
                    <div class="img-div">
                        <img :src="item.change_thumb" />
                    </div>
                    <div style="flex:1;margin-left: .5rem;">
                        <div class="flex-j-sb flex-a-c lh-1">
                            <span class="merchant-item-name">{{ item.store_name }}</span>
                            <span class="create-time">{{ item.created_at }}</span>
                        </div>
                        <div class="address"><i class="iconfont icon-dizhi1"></i>{{ item.full_address }}</div>
                    </div>
                </div>
                <div class="line"></div>
                <div class="flex-a-c  flex-j-sb" style="margin-top: .6875rem;">
                        <div class="flex-a-c">
                            <span class="f-12">总计流水：</span>
                            <span class="f-14 bold">¥{{ item.total }}</span>
                        </div>
                        <div class="flex-a-c">
                            <div class="img-small-div">
                                <div class="img-div">
                            <img style="border-radius: 50%;margin-right: .25rem;width: 1.25rem;height: 1.25rem;"
                                :src="item.has_one_merchant && item.has_one_merchant.has_one_member.avatar_image" /></div>

                            </div>
                            <div class="f-12">
                                {{ item.has_one_merchant &&
                                    item.has_one_merchant.has_one_member.nickname }}
                            </div>
                        </div>
                    </div>
            </div>
        </div>
    </div>
</template>

<script>
import { scrollMixin } from '@/utils/mixin.js';
export default {
    mixins: [scrollMixin],
    data() {
        return {
            active1: 0,
            list: [],
            current_page: 1,
            last_page: 1,
            isLoadMore: true,
            merchants_details_data:{},
        };
    },
    activated() {
        this.list = [];
        this.merchants_details_data = JSON.parse(localStorage.getItem('merchants_details_data'));
        this.getData()
    },
    methods: {
        link(data) {
            if(data.active==0)return;
            localStorage.setItem('agent_store_data', JSON.stringify(data))
            this.$router.push(this.fun.getUrl('finger_shopping_business', { store_id: data.id }));
        },
        getMoreData() {
            this.isLoadMore = false;
            if (this.current_page >= this.last_page) {
                return;
            } else {
                let page = this.current_page + 1;
                this.getData(page);


            }
        },
        getData(page = 1) {
            $http.post('plugin.zhixianggou.api.merchant.store-list', { page, merchant_id: this.$route.params.id,statistics:['total'] }, '.').then(res => {
                this.isLoadMore = true;
                if (res.result) {
                    this.current_page = res.data.current_page;
                    this.last_page = res.data.last_page;
                    this.list = res.data.page == 1 ? res.data.data : this.list.concat(res.data.data);
                } else {
                    this.$toast(res.msg)
                }
            })
        }
    }
};
</script>

<style scoped lang='scss'>
.active-class{
    img{
        display: block;
    }
    .img-div{
        position: relative;
        &::after{
            position: absolute;
            content:'';
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            background-color:#fff;
            opacity: .6;border-radius: 0.625rem 0.625rem 0.625rem 0.625rem;
            z-index: 10;
        }
    }
    .merchant-item-btn{
        border:1px solid #D6D6DC !important;
    }
    div{
        color:#999999 !important;
    }
    span{
        color:#999999 !important;
    }
}
::v-deep .van-tabs__nav {
    background-color: transparent;
}
::v-deep .van-tabs__line {
    bottom: 24px;
    background-color: var(--themeBaseColor);
}
::v-deep .van-tab--active {
  color: var(--themeBaseColor);
}

.lh-1 {
    line-height: 1;
}

.bold {
    font-weight: bold;
}

.list {
    padding: 0 .75rem;

    .line {
        height: 1px;
        background: #F0F0F1;
        margin: .75rem .1563rem .6875rem;

    }



    .line {
        height: 1px;
        background: #F0F0F1;
        margin: .75rem .1563rem 1.0625rem;

    }

    .merchant-item {
        padding: .75rem .75rem .9375rem;
        border-radius: .5rem;
        background-color: #fff;
        cursor: pointer;
        margin-bottom: .625rem;

        .merchant-item-name {
            font-weight: bold;
            font-size: .9375rem;
            color: #00001C;


        }

        .create-time {
            font-weight: 400;
            font-size: .75rem;
            color: #999999;
            line-height: 1;
        }

        .icon-dizhi1 {
            font-size: .625rem;
            margin-right: .1563rem;
        }

        .address {
            font-weight: normal;
            font-size: .75rem;
            color: #999999;
            margin-top: .6875rem;
            text-align: left;
        }

        img {
            width: 3rem;
            height: 3rem;
            border-radius: .625rem .625rem .625rem .625rem;
            margin: 0;
        }
    }

}

.account-manager {
    padding: .75rem;
    margin: .625rem .75rem;
    border-radius: .5rem;
    display: flex;
    background-color: #fff;
    align-items: center;

    .c-999 {
        color: #999999;
    }



    .account-manager-right {
        display: flex;
        align-items: center;
        margin-left: .5rem;

    }

    .count {
        color: #00001C;
        font-weight: bold;
        font-size: .9375rem;
        line-height: 1;
        padding-right: 1.0313rem;
    }

    .name {
        font-weight: bold;
        font-size: .9375rem;
        color: #00001C;
    }

    &-right {
        flex: 1;
    }

    img {
        margin: 0;
        width: 3rem;
        height: 3rem;
        border-radius: .625rem;
    }

}
</style>